<template>
  <div id="detail">
    <detailnavbarshow
      class="detailnav"
      @navindex="navindex"
      ref="detailnavbarshow"
    ></detailnavbarshow>
    <scroll
      class="detailcontent"
      :pullUpLoad="true"
      :probeType="3"
      ref="scroll"
      @scroll="scroll"
    >
      <detailswip :topimgs="topimgs"></detailswip>
      <detail-baseInfo :goods="goods"></detail-baseInfo>
      <detail-shopInfo :shop="shop"></detail-shopInfo>
      <detail-goodsInfo :detailInfo="detailInfo"></detail-goodsInfo>
      <detail-params :paramInfo="paramInfo" ref="params"></detail-params>
      <detail-comment :commentInfo="commentInfo" ref="comment"></detail-comment>
      <goods :goods="recommend" ref="goods"></goods>
    </scroll>
    <detail-bottombar @addCart="addlick"></detail-bottombar>
    <backtop @click.native="backclick" v-show="btnTopShow"></backtop>
    <toast></toast>
  </div>
</template>

<script>
import scroll from "@/components/common/scroll/scroll";
import {
  getdetail,
  getrecommend,
  Goods,
  Shop,
  GoodsParam,
} from "network/detail.js";
import goods from "components/content/goods/goods";
import detailnavbarshow from "@/views/detail/chil/detailnavbarshow";
import detailswip from "@/views/detail/chil/detailswip";
import DetailBaseInfo from "@/views/detail/chil/DetailBaseInfo";
import DetailShopInfo from "@/views/detail/chil/DetailShopInfo";
import DetailGoodsInfo from "@/views/detail/chil/DetailGoodsInfo";
import DetailParams from "@/views/detail/chil/DetailParams";
import DetailComment from "@/views/detail/chil/DetailComment";
import DetailBottombar from "@/views/detail/chil/DetailBottombar";
import { backtopMixin } from "@/common/mixin";
import toast from "@/components/common/toast/toast";
export default {
  name: "detail",
  mixins: [backtopMixin],
  data() {
    return {
      iid: 0,
      topimgs: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommend: [],
      themeTopY: [],
      currentindex: "",
    };
  },
  components: {
    scroll,
    detailnavbarshow,
    detailswip,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParams,
    DetailComment,
    goods,
    DetailBottombar,
    toast,
  },
  created() {
    this.iid = this.$route.params.iid;
    //网络请求
    getdetail(this.iid).then((result) => {
      // console.log(result);
      //轮播图
      const data = result.data.result;
      this.topimgs = data.itemInfo.topImages;
      //商品信息
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      //商家信息
      this.shop = new Shop(data.shopInfo);
      //商品详情数据
      this.detailInfo = data.detailInfo;
      //获取参数信息
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
      //评论信息
      if (data.rate.cRate != 0) {
        this.commentInfo = data.rate.list[0];
      }
    });
    getrecommend().then((res) => {
      // console.log(res.data.data.list);
      this.recommend = res.data.data.list;
    });
    // this.$nextTick(() => {
    //   this.themeTopY = [];
    //   this.themeTopY.push(0);
    //   this.themeTopY.push(this.$refs.params.$el.offsetTop);
    //   this.themeTopY.push(this.$refs.comment.$el.offsetTop);
    //   this.themeTopY.push(this.$refs.goods.$el.offsetTop);
    // });
  },
  updated() {
    setTimeout(() => {
      this.themeTopY = [];
      this.themeTopY.push(0);
      this.themeTopY.push(this.$refs.params.$el.offsetTop);
      this.themeTopY.push(this.$refs.comment.$el.offsetTop);
      this.themeTopY.push(this.$refs.goods.$el.offsetTop);
    }, 1000);
  },
  methods: {
    navindex(index) {
      this.themeTopY = [];
      this.themeTopY.push(0);
      this.themeTopY.push(this.$refs.params.$el.offsetTop);
      this.themeTopY.push(this.$refs.comment.$el.offsetTop);
      this.themeTopY.push(this.$refs.goods.$el.offsetTop);
      this.$refs.scroll.scrollTo(0, -this.themeTopY[index], 10);
    },
    scroll(e) {
      const positonY = -e.y;
      for (let i = 0; i < this.themeTopY.length; i++) {
        if (
          this.currentindex != i &&
          ((i < this.themeTopY.length - 1 &&
            positonY >= this.themeTopY[i] &&
            positonY < this.themeTopY[i + 1]) ||
            (i === this.themeTopY.length - 1 && positonY >= this.themeTopY[i]))
        ) {
          this.currentindex = i;
          this.$refs.detailnavbarshow.currentindex = this.currentindex;
        }
      }
      // 决定backtop是否显示
      e.y < -1000 ? (this.btnTopShow = true) : (this.btnTopShow = false);
    },
    addlick() {
      console.log("--------");
      //1.获取购物车中需要展示的信息
      const product = {};
      product.iid = this.iid;
      product.image = this.topimgs[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      //2.将商品添加到购物车
      // this.$store.commit("addcart", product);
      this.$store.dispatch("addcart", product).then((res) => {
        this.$toast.show(res, 1500);
      });
    },
  },
};
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 9999;
  background-color: #fff;
  height: 100vh;
}
.detailnav {
  position: relative;
  background-color: #fff;
  z-index: 9999;
}
.detailcontent {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
}
</style>